<template>
  <div class="">
    <div class="image-list" ref="contentBox">
      <template v-if="isLoaded">
        <div class="image-item" v-for="(item, index) in imageList" :key="index">
          <imageLazy
            :index="index"
            :baseUrl="item.url"
            fit="contain"
            imgStyle="border-radius: 5px;overflow: hidden;"
            :scrollParent="$refs.contentBox"
            ref="lazyImg"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import imageLazy from "./components/imageLazy.vue";
export default {
  props: {},
  components: {
    imageLazy,
  },
  data() {
    return {
      imageList: [
        {
          url: "https://spaice-cdn.ventmere.cn/files/R_photo/0/2022/12/19/49a3be2c5ec34d33848a18280922c1d1/f34ff613-6548-4fd9-8a0f-e8018b54ac6b.jpg",
        },
        {
          url: "https://spaice-cdn.ventmere.cn/files/R_photo/0/2022/12/19/9a4c99d9a31d42859b09112637f9afff/adce327e-99c5-41d7-bc2c-1665f62b3c9a.jpg",
        },
        {
          url: "https://spaice-cdn.ventmere.cn/files/R_photo/0/2022/12/19/ad679be766494e66aa8e6477ab183cfb/60257009-b063-4e1a-a96d-39ca5f067070.jpg",
        },
        {
          url: "https://spaice-cdn.ventmere.cn/files/R_photo/0/2022/12/12/5f0a146c2ea7454d9a9ff888a438aeda/ea542c88-c267-4499-aa96-ec34754af02f.jpg",
        },
        {
          url: "https://spaice-cdn.ventmere.cn/files/R_photo/0/2022/12/5/45f6eeba39944ecf968d4fbd1c87e32a/942ba75b-5e25-4544-bad4-556291f0b2f5.jpg",
        },
      ],
      isLoaded: false,
    };
  },
  created() {},
  mounted() {
    this.initDataFun(); // 初始化数据
    this.isLoaded = true;
  },
  beforeDestroy() {
    const contentBoxDom = this.$refs.contentBox;
    contentBoxDom.removeEventListener(
      "DOMMouseScroll",
      this.handlerMouserScroll,
      false
    );
    contentBoxDom.removeEventListener(
      "mousewheel",
      this.handlerMouserScroll,
      false
    );
  },
  computed: {},
  watch: {},
  methods: {
    // 初始化数据
    initDataFun() {
      console.log(111);
      const contentBoxDom = this.$refs.contentBox;
      contentBoxDom.addEventListener(
        "DOMMouseScroll",
        this.handlerMouserScroll,
        false
      );
      contentBoxDom.addEventListener(
        "mousewheel",
        this.handlerMouserScroll,
        false
      );
    },
    handlerMouserScroll() {
      console.log("in");
      const lazyImgsDom = this.$refs.lazyImg;
      if (!lazyImgsDom) return;
      for (let i = 0; i < lazyImgsDom.length; i++) {
        const lazyImg = lazyImgsDom[i];
        if (!lazyImg) continue;
        lazyImg.onScrollChange();
      }
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.image-list {
  width: 700px;
  height: 500px;
  overflow-y: auto;
  border: 1px solid yellowgreen;
  .image-item {
    width: 300px;
    height: 200px;
    border: 1px dashed #c9c9c9;
    background-color: #e5e5e5;
  }
}
</style>
